import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import './index.css';
import { Image } from 'antd-mobile';
import RecordIcon from '../../../public/Icon/record.png';
import WalletIcon from '../../../public/Icon/wallet.png';
import CollectionIcon from '../../../public/Icon/collect_n.png';
import AdoptionIcon from '../../../public/Icon/adopted_suggestions.png';
import VideoIcon from '../../../public/Icon/video.png';
import FriendIcon from '../../../public/Icon/patient_support_group.png';
import AttentionIcon from '../../../public/Icon/attention_n.png';
import TaskIcon from '../../../public/Icon/task.png';
import SettingIcon from '../../../public/Icon/set.png';
import Current from '../../../public/Icon/current_consultation.png'
import History from "../../../public/Icon/historical_consultation.png"
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import messageIcon from '../../../public/Icon/information_black_n.png'
import userIcon from '../../../public/Icon/user.png'
import { Avatar } from 'antd-mobile'
import PermissionsIcon from '../../../public/Icon/permissions.png'
import { useAppSelector } from '../../store/hooks'
const Index: FC = ({ }) => {
    const navigate = useNavigate()
    const { users } = useAppSelector((state) => state.userList);
    const [userInfo, setUserInfo] = useState<any>([
        { icon: RecordIcon, label: '我的档案', color: '#FF69B4' },
        { icon: WalletIcon, label: '我的钱包', color: '#4A90E2' },
        { icon: CollectionIcon, label: '我的收藏', color: '#FFD700' },
        { icon: AdoptionIcon, label: '被采纳建议', color: '#32CD32' },
        { icon: VideoIcon, label: '我的视频', color: '#FF4500' },
        { icon: FriendIcon, label: '我的病友圈', color: '#9370DB' },
        { icon: AttentionIcon, label: '我的关注', color: '#FF6B6B' },
        { icon: TaskIcon, label: '我的任务', color: '#FF69B4' },
        { icon: SettingIcon, label: '设置管理', color: '#4A90E2' },

    ])
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    useEffect(() => {
        const user = JSON.parse(localStorage.getItem('user') || '{}')
        const items = users.find((item: any) => item.email === user.email)
        console.log(items, users, 'users');

        if (items?.isAdmin) {
            setUserInfo([...userInfo, { icon: PermissionsIcon, label: '权限管理', color: '#4A90E2' }])
        }
    }, [])

    return (
        <div className="my-page">
            {/* 头部区域 */}
            <div className="header-section">
                <div className="header-background">
                    <div className="header-content">
                        <div className="header-top">
                            <div className="back-button" onClick={() => navigate(-1)}> <LeftOutline width={25} height={25} /></div>
                            <div className="notification-bell"> <Image
                                src={messageIcon}
                                width={24}
                                height={24}
                                className="notification-icon"
                            /></div>
                        </div>
                        <div className="user-profile">
                            <div className="user-avatar">
                                {
                                    user ? <div className="avatar-placeholder"> <Avatar
                                        src={userIcon}
                                        className="user-avatar"
                                    /></div> : <div className="avatar-placeholder"> <Avatar
                                        src={userIcon}
                                        className="user-avatar"
                                    /></div>
                                }

                            </div>
                            <div className="user-info">
                                <div className="user-name">{user.nickName}</div>
                                <div className="sign-in-button">签到</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* 我的问诊卡片 */}
            <div className="consultation-card">
                <div className="card-title">我的问诊</div>
                <div className="consultation-list">
                    <div className="consultation-item">
                        <div className="consultation-icon current">
                            <div className="icon-placeholder"><Image src={Current}></Image></div>
                        </div>
                        <div className="consultation-text">当前问诊</div>
                        <div className="consultation-arrow">&gt;</div>
                    </div>
                    <div className="consultation-item">
                        <div className="consultation-icon history">
                            <div className="icon-placeholder"><Image src={History}></Image></div>
                        </div>
                        <div className="consultation-text">历史问诊</div>
                        <div className="consultation-arrow">&gt;</div>
                    </div>
                </div>
            </div>

            {/* 功能图标网格 */}
            <div className="features-grid">
                {userInfo.map((feature: any, index: number) => (
                    <div key={index} className="feature-item">
                        <div
                            onClick={() => {
                                if (feature.label === '权限管理') {
                                    navigate('/authSetting')
                                }
                            }}
                            className="feature-icon"
                        >
                            <Image src={feature.icon} width={24} height={24} />
                        </div>
                        <div className="feature-label">{feature.label}</div>
                    </div>
                ))}
            </div>

            {/* 底部版权信息 */}
            <div className="footer">
                <div className="copyright">©八维移动通信学院毕业作品</div>
            </div>
        </div>
    );
};

export default Index;